<!-- eslint-disable -->
<template>
    <div style="background:#f3f3f3; padding-bottom:10px;" :style="{minHeight : offsetheight + 'px'}">
        <van-row>
            <van-col span="24">
                <img src="@/assets/images/showinfo/bg.png" style="width:100%">
            </van-col>
        </van-row>

        <template v-if="loading" style="text-align:center;">
            <van-row>
                <van-col span="24" style="margin-top:120px; text-align:center;">
                    <van-loading type="spinner" color="#1989fa" size="48px"
                                 text-size="24px" vertical>
                        查询中
                    </van-loading>
                </van-col>
            </van-row>
        </template>

        <template v-else>
            <template v-if="userinfo == undefined">
                <van-row>
                    <van-col span="24" style="padding:0 20px; text-align:center;margin-top:-90px;">
                        <img :src="require('@/assets/images/showinfo/t1x.png')" class="imgStyle">
                    </van-col>
                </van-row>
            </template>

            <template v-else>
                <van-row>
                    <van-col span="24" style="padding:0 20px; text-align:center;margin-top:-90px;position: relative">
                        <img :src="require('@/assets/images/showinfo/11' + userinfo.type + '.png')" class="imgStyle"
                             :style="{borderColor:getColor}">
                        <div class="main-tip">
                            <div :style="{color:getColor}">验证信息正确</div>
                        </div>
                    </van-col>
                </van-row>

                <!--<van-row
                        style="padding:10px 15px; margin:10px 20px 0;background:#fff; border-radius:3px; font-size:14px;"
                        :class="'type' + userinfo.type" v-if="false">
                    <van-row style=" ">
                        <van-col span="24">
						<span :class="'c' + userinfo.type">
							<van-icon name="manager" size="14px"/>
						</span>
                            <span style="margin-left:5px;" class="title">居民信息</span>
                        </van-col>
                    </van-row>
                    <van-row style="padding:10px 0; border-bottom:1px solid #f3f3f3; " v-if="false">
                        <van-col span="8">
                            <span class="title">姓名：</span>
                            <span class="value">{{userinfo.name}}</span>
                        </van-col>
                        <van-col span="8">
                            <span class="title">性别：</span>
                            <span class="value">{{userinfo.sex}}</span>
                        </van-col>
                        <van-col span="8">
                            <span class="title">年龄：</span>
                            <span class="value">{{userinfo.age}}</span>
                        </van-col>
                    </van-row>
                    <van-row style="padding:10px 0 0;" v-if="false">
                        <van-col span="24">
                            <span class="title">地址：</span>
                            <span class="value">{{userinfo.loc_address}}</span>
                        </van-col>
                    </van-row>
                </van-row>-->
                <div class="user-info" style="padding: 0 20px">
                    <div class="table-info" :style="{borderColor:getColor}">
                        <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>姓名</div>
                            </van-col>
                            <van-col span="6" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userinfo.name}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                性别
                            </van-col>
                            <van-col span="3" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userinfo.sex}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                年龄
                            </van-col>
                            <van-col span="3" class="table-info-row2-col value">
                                {{userinfo.age}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                地址
                            </van-col>
                            <van-col span="20" class="table-info-row2-col value" style="padding-left:5px">
                                {{userinfo.loc_address}}
                            </van-col>
                        </van-row>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

<script>
import { insertUserPermitPlace } from '@/api/yi-qing-fang-kong.js'
import { getAgeByIdCard } from '@/libs/tools'
// import { passType } from '@/libs/dist'

export default {
  data () {
    return {
      userinfo: {
        type: 1
      },
      offsetheight: document.documentElement.clientHeight - 10,
      qrColor: ['', '#0DBB22', '#00A2E6', '#FFEF00', '#E9611D', '#A865CF', '#E30920'],
      fontColor: ['', '#FFFFFF', '#000000', '#FFFFFF', '#FFFFFF'],
      borderColor: ['', '#0DBB22', '#00A2E6', '#FFEF00', '#E9611D', '#A865CF', '#E30920'],
      loading: true,
      // 经度
      lng: '123.410782',
      // 纬度
      lat: '41.789928'
    }
  },

  props: {},

  components: {},

  computed: {
    getColor () {
      return this.qrColor[this.userinfo.type]
    }
  },

  methods: {
    getLocation () {
      const randomNum = this.$route.query && this.$route.query.randomNum
      console.log('位置-获取的随机码', randomNum)
      let _this = this
      this.$common.getLocation(function (option) {
        _this.lng = option.longitude
        _this.lat = option.latitude
        console.log(_this.lng, '获取后经度')
        console.log(_this.lat, '获取后纬度')
        // 存入信息
        const param = {
          qrcode: randomNum,
          longitude: _this.lng,
          latitude: _this.lat
        }
        _this.insertUserPermitPlace(param)
      })
      console.log('默认经度', this.lng)
      console.log('默认纬度', this.lat)
    },
    insertUserPermitPlace (data) {
      insertUserPermitPlace(data).then(ret => {
        console.log(ret.data, '返回的信息')
        if (ret.data.errcode === 0) {
          this.loading = false
          this.userinfo = ret.data.data
          this.userinfo['age'] = getAgeByIdCard(this.userinfo.card_no)
        } else {
          this.$notify({ type: 'danger', message: ret.data.errmsg })
        }
      })
    }
  },

  watch: {},

  mounted () {
    // this.init()
    this.getLocation()
  }

}
</script>

<style scoped lang="less">
    @borderColor: #00A2E6;
    .type1 {
        border: 1px solid #0dbb22;
    }

    .type2 {
        border: 1px solid #ffff00;
    }

    .type3 {
        border: 1px solid #e9611d;
    }

    .type4 {
        border: 1px solid #e30920;
    }

    .c1 {
        color: #0dbb22;
    }

    .c2 {
        color: #ffff00;
    }

    .c3 {
        color: #e9611d;
    }

    .c4 {
        color: #e30920;
    }

    /*.title {
        color: #363636;
        font-weight: bold;
    }*/

    .value {
        color: #787878;
    }

    .main-tip {
        position: absolute;
        top: 70%;
        left: 2%;
        right: 2%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }

    .table-info {
        padding: 0px 4px 0 4px;
        border: 1px solid;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .user-info {
        padding: 5px 10px 10px 10px;

        .name {
            color: #363636;
            font-weight: bold;
        }

        .address {
            font-size: 14px;
        }
    }

    .imgStyle {
        width: 100%;
        border: 1px solid @borderColor;
    }
</style>
